* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

button {
    outline: none;
}

a {
    text-decoration: none;
    color          : #000;
}

a:hover {
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin         : 0;
    padding        : 0;
}

li {
    list-style: none;
}

/* 多边形旋转 */
@keyframes shapRound {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    3% {
        opacity  : 1;
        transform: scale(1) rotate(480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(1000deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(2100deg);
    }
}

/* 多边形旋转2 */
@keyframes shapRound1 {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    6% {
        opacity  : 1;
        transform: scale(1) rotate(-480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(-1300deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(-2100deg);
    }
}

// body {
//     background-color: pink;
// }
@navHight: 100px;

.nav {
    width          : 100%;
    height         : @navHight;
    padding-left   : 5%;
    // position    : fixed;
    line-height    : @navHight;

    font-size          : 20px;
    font-weight        : 600px;
    z-index            : 100;
    background-color   : transparent;
    // outline         : solid 2px;
    background-color   : #fff;

    .nav_l {
        width: 85%;
        float: left;

        img {
            vertical-align: middle;
            margin-right  : 10px;
        }

        ul {
            float: right;

            li {
                float       : left;
                margin-right: 130px;

                a {

                    z-index : 101;
                    position: relative;

                    &:hover {
                        text-decoration: none;
                        border-bottom  : 2px solid #f6cc0d;

                        .shapeHover {
                            animation: shapRound 10s;
                        }

                        .shapeHover1 {
                            animation: shapRound1 10s;
                        }
                    }

                    .shapeHover {
                        @large     : 50px;
                        width      : @large;
                        height     : @large;
                        position   : absolute;
                        left       : 50%;
                        top        : 50%;
                        margin-left: -25px;
                        margin-top : -25px;
                        border     : solid 1px lightgray;
                        opacity    : 0;
                    }

                    .shapeHover1 {
                        @large     : 40px;
                        width      : @large;
                        height     : @large;
                        position   : absolute;
                        left       : 50%;
                        top        : 50%;
                        margin-left: -20px;
                        margin-top : -20px;
                        border     : solid 1px gray;
                        opacity    : 0;
                    }
                }
            }
        }
    }

    .nav_r {
        float: right;

        input {
            outline      : none;
            padding-left : 10px;
            border-radius: 20px;
            height       : 30px;
            color        : #000;
            border       : 4px solid gray;
        }

        img {
            vertical-align: middle;
            width         : 30px;
            margin-left   : 10px;
        }

    }

    .black {
        position           : absolute;
        background-color   : black;
        height             : 100%;
        width              : 39.9%;
        left               : 41.15%;
        // outline         : solid 1px;
    }
}

.all {
    padding-top: @navHight;
    position   : relative;

    .rightBar {
        width      : 20px;
        height     : 2000px;
        // outline : solid 1px;
        position   : absolute;
        right      : 0;
        top        : 30px;
    }

    .stage {
        // height : 200px;
        width     : 100%;
        // outline: solid 1px;

        /* 此处的段落内容 */
        .myP {
            font-size        : 18px;
            line-height      : 1.5em;
            letter-spacing   : 0.3em;
            font-family      : '黑体';
            // margin-bottom : 2em;
        }

        // 小黄块
        .yellowBlock {
            position        : absolute;
            width           : 100px;
            height          : 100px;
            background-color: #efd157;
            opacity         : 0.6;
            left            : 0;
            top             : 0;
            transition      : all 0.2s;

            &:hover {
                opacity: 0.8;
            }
        }

        // 左侧标题文字区域
        .leftTitle {
            width   : 40%;
            position: relative;

            .yellowBar {
                width           : 15px;
                height          : 180px;
                position        : absolute;
                left            : 70px;
                top             : 30px;
                background-color: #feea98;
            }

            h1 {
                line-height      : 3em;
                letter-spacing   : 0.4em;
                font-size        : 40px;
                // font-family   : '黑体';
                text-shadow      : 1px 1px 1px #feea9891;
            }

            p {
                .myP
            }

            h1,
            p {
                // outline    : solid 1px;
                margin-left: 20px;
            }
        }

        // 右侧文字内容
        .rightContent {
            width: 40%;
            .myP;
            padding-right: 130px;

            p {
                margin-bottom: 20px;
            }
        }

        img {
            transition: all 1s;

            &:hover {
                transform: scale(1.05);
            }
        }

        // 左侧图片区域
        .leftImgArea {
            width: 60%;

            img {
                height     : 70%;
                margin-left: 20px;
            }

            .y1 {
                left: 83%;
                top : 60%;
            }

            .y2 {
                left  : 81%;
                top   : 75%;
                width : 35px;
                height: 35px;
            }
        }

        // 右侧图片区域
        .rightImgArea {
            width: 55%;

            img {
                height     : 70%;
                line-height: 100%;
            }

            .y1 {
                left: -5%;
                top : 60%;
            }

            .y2 {
                left  : 5%;
                top   : 75%;
                width : 35px;
                height: 35px;
            }
        }

        // 左侧少量的文字内容
        .leftLessContent {
            width              : 45%;
            // background-color: red;
            padding            : 100px;
            padding-left       : 200px;

            p {
                .myP;
            }
        }

        .leftImgArea,
        .rightImgArea {
            position: relative;
        }

        .block-content {
            height: 550px;

            .left,
            .right {
                float     : left;
                height    : 100%;
                // outline: solid pink 2px;
            }

            .left {
                padding-left: 100px;
            }

            &:nth-child(1) {
                overflow: hidden;

                .left {
                    .leftTitle
                }

                .right {
                    // width: 60%;
                    margin-left: 5%;
                    .rightImgArea; // img {
                    //     width         : 60%;
                    //     margin-left   : 30px;
                    //     // margin-top : -100px;
                    // }
                }
            }

            &:nth-child(2) {

                .left {
                    .leftImgArea;
                }

                .right {
                    .rightContent;
                }
            }

            &:nth-child(3) {
                .left {
                    .leftLessContent;
                }

                .right {
                    .rightImgArea;
                }
            }

            &:nth-child(4) {
                .left {
                    .leftImgArea;
                }

                .right {
                    .rightContent;
                }
            }

            &:nth-child(5) {
                .left {
                    .leftTitle;
                }

                .right {
                    .rightImgArea;
                    margin-left: 5%;
                }
            }

            &:nth-child(6) {
                .left {
                    .leftImgArea;
                }

                .right {
                    .rightContent;
                }
            }

            &:nth-child(7) {
                .left {
                    .leftLessContent;
                }

                .right {
                    .rightImgArea;

                    #gotoBtn {
                        position           : absolute;
                        display            : block;
                        right              : 15%;
                        margin-top         : 30px;
                        width              : 220px;
                        height             : 50px;
                        line-height        : 50px;
                        text-align         : center;
                        // outline         : solid 1px;
                        background-color   : #feea98;
                        color              : black;
                        font-size          : 20px;
                    }
                }


            }
        }
    }
}